import { createBrowserRouter } from 'react-router-dom'
import { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
import Layout from '../pages/Layout';
import UserList from '../pages/User/UserList';
import UserDetail from '../pages/User/UserDetail';
import ArticleList from '../pages/Article/ArticleList';
import ArticleDetail from '../pages/Article/ArticleDetail';
import ErrorPage from '../pages/ErrorPage';
import Home from '../pages/Home'
import Login from '../pages/Login'

const menuConfig = [
    {
        path: '',
        element: <Home />,
        icon: <UploadOutlined />,
        label: 'Home',
    },
    {
        path: 'user',
        icon: <UserOutlined />,
        label: '用户',
        children: [
            {
                path: 'list',
                element: <UserList />,
                label: '用户列表',
            },
            {
                path: 'detail',
                element: <UserDetail />,
                label: '用户详情',
            },
        ],
    },
    {
        path: 'article',
        icon: <VideoCameraOutlined />,
        label: '文章',
        children: [
            {
                path: 'list',
                element: <ArticleList />,
                label: '文章列表',
            },
            {
                path: 'detail',
                element: <ArticleDetail />,
                label: '文章详情',
            },
        ],
    },

];

const createRoutes = (routes) => {
    return routes.map(route => {
        if (route.children) {
            return {
                path: route.path,
                element: route.element,
                children: createRoutes(route.children),
            };
        }
        return {
            path: route.path,
            element: route.element,
        };
    });
};

const createMenuItems = (path, routes) => {
    return routes.map(route => {
        if (route.children) {
            return {
                key: path + '/' + route.path,
                icon: route.icon,
                label: route.label,
                children: createMenuItems(path + '/' + route.path, route.children),
            };
        }
        return {
            key: path + '/' + route.path,
            icon: route.icon,
            label: route.label,
        };
    });
};

const router = createBrowserRouter([
    {
        path: '/',
        element: <Layout />,
        errorElement: <ErrorPage />,
        children: createRoutes(menuConfig),
    },
    {
        path: 'login',
        element: <Login />,
        label: 'Login',
    },
]);

export default router;

export { createMenuItems, menuConfig };